/*
 * @Author: jiayu
 * @Date: 2022-08-04 15:07:05
 * @LastEditors: jiayu
 * @LastEditTime: 2023-11-17 11:05:11
 * @Description:
 */
import { instance } from '@/services/jy-api/api';
import { useOrganizationalStore } from '';
import { Modal } from 'antd';
import { useState, useCallback, memo, useEffect } from 'react';
import styles from './index.less';
import Organization from './Organization';
import Section1 from './Section1';
import Section2 from './Section2';
import Section3 from './Section3';
import Section4 from './Section4';
import Section5 from './Section5';
import Section6 from './Section6';
import Section7 from './Section7';
import Section8 from './Section8';
import Section9 from './Section9';
import { useModel } from '@umijs/max';
const Home = memo((props) => {
  const [chartFull, setChartFull] = useState(false)
  const [type, setType] = useState('')
  const { currentDepartmentId } = useModel('organizational')
  const [digitalData, setDigitalData] = useState<{
    "student_num": 4,  //学员总数
    "course_num": 2,  //课程总数
    "excount": 2, //考试总数
    "depnum": "1.8", //课程总时长
    "login_log": 5  //在线人数
  }>()

  /**实现F11全屏效果*/
  function fullScreen(element) {
    element = element || document.body;// 如果传入 "element" 参数则以该元素为目标，否则为整个文档体 "document.body"
    if (element.requestFullscreen) {// 判断是否支持 W3C 标准的请求全屏接口
      element.requestFullscreen();// 通过调用 requestFullscreen() 方法来请求进入全屏模式
    } else if (element.mozRequestFullScreen) {// 判断是否支持 moz 的非标准客户端 API 请求接口
      element.mozRequestFullScreen();// 通过调用 mozRequestFullScreen() 方法来请求进入全屏模式
    } else if (element.msRequestFullscreen) {// 判断是否支持 Microsoft 提供的 PC Edge 浏览器和 IE11 浏览器专属 Api 接口
      element.msRequestFullscreen();// 通过调用 msRequestFullscreen() 方法来请求进入全屏模式
    } else if (element.webkitRequestFullscreen) {// 判断是否支持 Webkit 内核标准请求接口
      element.webkitRequestFullScreen();// 通过调用 webkitRequestFullScreen() 方法来请求进入全屏模式
    }
  }
  /**退出F11全屏*/
  function exitFullScreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
  const fullHandle = useCallback((val: string) => {
    setType(val)
    const dom = document.querySelector('#' + val)
    const isfull = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement ? true : false;
    console.log(dom)
    isfull ? exitFullScreen() : fullScreen(dom)
  }, [])

  const rend = useCallback(() => {
    console.log(type)
    if (type == 'section1') {
      return <Section1 isModal full={setChartFull} />
    }
    if (type == 'section2') {
      return <Section2 isModal full={setChartFull} />
    }
    if (type == 'section3') {
      return <Section3 isModal full={setChartFull} />
    }
    if (type == 'section7') {
      return <Section7 isModal full={setChartFull} />
    }
    if (type == 'section8') {
      return <Section8 isModal full={setChartFull} />
    }
  }, [type])

  const getHomeData = () => {
    instance('/index/Screen/getPart', {
      params: {
        department_id: currentDepartmentId
      }
    }).then(data => {
      setDigitalData(data.data)
    })
  }

  useEffect(() => {
    currentDepartmentId && getHomeData()
  }, [currentDepartmentId])

  return (
    <div className={styles.home}>
      <div className={styles.organization}>
        <Organization />
      </div>
      <div className={styles.totalList}>
        <div className={styles.item}>
          <div className={styles.value}>{digitalData?.student_num}人</div>
          <div className={styles.label}>学员总数</div>
        </div>
        <div className={styles.item}>
          <div className={styles.value}>{digitalData?.course_num}个</div>
          <div className={styles.label}>课程总数</div>
        </div>
        <div className={styles.item}>
          <div className={styles.value}>{digitalData?.excount}个</div>
          <div className={styles.label}>考试总数</div>
        </div>
        <div className={styles.item}>
          <div className={styles.value}>{digitalData?.depnum}小时</div>
          <div className={styles.label}>课程总时长</div>
        </div>
        {/* <div className={styles.item}>
          <div className={styles.value}>{digitalData?.login_log}</div>
          <div className={styles.label}>在线人数</div>
        </div> */}
      </div>
      <div className={styles.list}>
        <Section1 fullHandle={fullHandle} full={setChartFull} />

      </div>
      <div className={styles.list}>
        <div className={styles.item} style={{ width: "calc(50% - 250px)" }}>
          <Section2 fullHandle={fullHandle} full={setChartFull} />

        </div>
        <div className={styles.item} style={{ width: 500 }}>
          <Section7 fullHandle={fullHandle} full={setChartFull} />

        </div>
        <div className={styles.item} style={{ width: "calc(50% - 250px)" }}>
          <Section3 fullHandle={fullHandle} full={setChartFull} />
        </div>
      </div>
      <div className={styles.list}>
        <Section8 fullHandle={fullHandle} full={setChartFull} />

      </div>
      {/* <Modal
        closable={false}
        centered
        visible={chartFull}
        width={'90vw'}
        footer={false}
        destroyOnClose
      >
        {
          rend()
        }
      </Modal> */}
    </div>
  );
});
export default Home;
